<template>
  <div>
    <!-- 使用transition组件 实现动画 -->
    <button @click="show = !show">Toggle</button>
    <!-- 使用transition
        transition: 自动会给包裹的元素设置类型
        v-enter-from 
        v-enter-active
        v-enter-to
        v-leave-from
        v-leave-active
        v-leave-to
     -->
    <Transition>
      <p v-if="show">hello</p>
    </Transition>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      show: true, // 显示标签
    };
  },
};
</script>
<style scoped>
.v-enter-active,
.v-leave-active {
  transition: background 5s ease;
}

.v-enter-to,
.v-leave-from {
  background: green;
}
.v-enter-from,
.v-leave-to {
  background: red;
}
</style>